<template>
	<view class="containerMine">
		<view class="header" :style="{height: headerHeight+'px', width: screenWidth+'px'}">
			<view class="back" @click="back">
				<u-icon name="arrow-left" :size="50"></u-icon>
			</view>
			<view class="pageName">
				我加入的
			</view>
			
			
			<view></view>
		</view>
		
			<view class="main" :style="{height:screenHeight-headerHeight+'px' ,width: screenWidth+'px'}">
				<view class="listContainer" :style="{width: screenWidth*0.90+'px'}">
					<view class="list">
						<view class="ever" v-for="(item, index) in list" :key="index" @click="seeDetail(item)">
							<view class="cover">
								<image :src="item.cover" mode="aspectFill" style="width: 220upx; height: 220upx;"></image>
							</view>
							<view class="mainInfo">
									<view class="teamMain">
	<!-- 									<view class="leader">
											<u-avatar></u-avatar>
											<view class="nickName">
												{{}}
											</view>
										</view> -->
										<view class="teamName">
											{{item.title}}
										</view>
									</view>
									<view class="description">
										{{item.description}}
									</view>
									<view class="teamTags">
										<!-- <uni-tag v-for="(item, index) in teamTags" :key="index" :text="item.tagName" type="default" size="small" class="showTags"
												 style="margin-right: 18upx;"></uni-tag> -->
									</view>
									<view class="deadLine">
										<view class="scale">
											招募名额:&nbsp; <br/>{{item.scale}}
										</view>
										<view class="deadTime">
											截止时间:&nbsp; <br/>{{item.deadline}}
										</view>
									</view>
							</view>
						</view>
					</view>
					
					<view class="seeMore">
						<u-loadmore 
							:fontSize="24"
							color="#c7c7c7"
							:iconSize="26"
							:status="loadStatus" 
							@loadmore="getMore"
							loading-text="正在获取" 
							loadmore-text="查看更多" 
							nomore-text="没有更多了" 
							lineColor="#dfdfdf"
							:dashed="false"
							line
						/>
					</view>
				</view>
				
				
				<uni-popup :show="openDetail" ref="competitionDetail" :is-mask-click="true" @maskClick="closeDetail">
							<view class="competitionDetail" :style="{width:cardWidth*0.8+'px', height: cardHeight*0.85+'px'}" >
								<u-skeleton :loading="detailLoading" :rows="4" :title="false" :rowsWidth="[cardWidth*1.6, cardWidth, cardWidth*1.6, cardWidth*1.6]" :rowsHeight="[cardHeight, cardHeight*0.2, cardHidth, cardHeight*0.5]">
									<view class="wholeCover" :style="{height: cardHeight*0.45+'px', width: cardWidth*0.8+'px', backgroundImage: `url(${competitionDetail.cover})` ,backgroundSize: 'cover', backgroundPosition: 'center'}">
										
										<view class="mask"  :style="{top: cardHeight*0.275+'px'}"
															style="	position: relative;
																	height: 40%;
																	width: 100%;
																	backdrop-filter: blur(5 upx);
																	background-image: linear-gradient(to top, rgba(71, 71, 71, 1),  rgba(71, 71, 71, 0.6),rgba(116, 116, 116, 0));">
											<view class="scale" :style="{top: cardHeight*0.15+'px', left: cardWidth*0.05+'px'}">
												<span>招募人数: &nbsp;</span>
												{{competitionDetail.joinCount}}/{{competitionDetail.scale}}
											</view>
										</view>
									</view>
									<view class="header">
										{{competitionDetail.title}}
									</view>
<!-- 									<view class="createBy" @click="seeHome">
											<u-avatar :src="competitionDetail.member[0].avatar" :size="44" style="border: 2upx solid white;"></u-avatar>
											<view class="name">{{competitionDetail.member[0].nickname}}</view>
									</view> -->
									<view class="introduce">
										<span style="font-weight: bold; padding-left: 20upx; border-left: 10upx solid rgb(82,82,136);">队伍介绍: </span> <br/>
										<view style="display: flex;flex-direction: column;flex-wrap: wrap;margin-left: 30upx; margin-top: 20upx;word-wrap: break-all;word-break: normal;">
											{{competitionDetail.description}}
										</view>
									</view>
									
									<view>
										<span style="font-weight: bold; padding-left: 20upx; border-left: 10upx solid rgb(240,55,82);">队员:</span>
<!-- 										<view class="memberBox">
											<view v-for="(item, index) in competitionDetail.member" :key="index" @click="seeHome(item.id)">
												<u-avatar :src="item.avatar" :style="{border: `4upx solid ${index==0?'rgb(255,215,0)':'rgb(255,255,255)'}`}" :size="70" style="border: 2upx solid white;"></u-avatar>
												<view style="font-size: 0.7rem;margin-top: 8upx;">
													{{item.nickname}}
												</view>
											</view>
										</view> -->
									</view>	
									
									<view class="school" style="margin-top: 30upx;">
										<span style="font-weight: bold; padding-left: 20upx; border-left: 10upx solid rgb(93,190,138);">学校</span>
										<view class="schoolTag">
											<u-tag :inverted="true" :text="competitionDetail.school" type="primary" size="mini" style="display: table;margin-top: 12upx; margin-left: 20upx;padding-left: 8upx;padding-right: 8upx;"></u-tag>
										</view>
									</view>
									
									<view style="margin-top: 40upx;"> 
										<span style="font-weight: bold; padding-left: 20upx; border-left: 10upx solid rgb(97,100,159);">招募截止日期</span>
										<view class="schoolTag" style="margin-top: 12upx; margin-left: 30upx;">
											{{competitionDetail.deadline}}
										</view>
									</view>
								</u-skeleton>
							</view>
							<view class="footer">
								<view class="delete" @click="deleteTeam(competitionDetail.id)" style="background-color: rgba(235, 64, 7, 0.5);color: rgba(255, 255, 255, 1.0);">
									退出队伍
								</view>
								<view class="update" style="border-left: 1upx solid rgba(19,72,87,0.1);" @click="contactLeader">
									联系队长
								</view>
							</view>
						</uni-popup>
						
						
						<uni-popup :show="confirmDeleteShow" ref="delete" :is-mask-click="true" @maskClick="quitDelete">
							<view class="deleteConfirmBox">
								<view style="width: 400upx; height: 300upx; display: flex;justify-content: center;align-items: center; background-color: aliceblue;">
									确定退出该组队吗？
								</view>
								<view style="display: flex; height: 100upx; width: 400upx; flex-direction: row; border-top: 1upx solid rgba(71, 71, 71, 0.3);">
									<view style="width: 50%; height: 100upx; background-color: red; color: white; display: flex; justify-content: center;align-items: center; font-size: 1.2rem;" @click="confirmDelete">确定</view>
									<view style="width: 50%; height: 100upx; background-color: aliceblue; color: black; display: flex; justify-content: center;align-items: center; font-size: 1.2rem;"  @tap.stop="quitDelete">取消</view>
								</view>
							</view>
						</uni-popup>
			</view>
		
		
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default{
		data(){
			return{
				statusBarHeight: 0,
				screenHeight:0,
				screenWidth:0,
				headerHeight:0,
				cardHeight: 0,
				cardWidth:0,
				page: 1,
				total: 0,
				loadStatus: 'loadmore',
				openDetail: false,
				detailLoading:false,
				confirmDeleteShow: false,
				isDelete: false,
				timeUtil: new Date(),
				competitionDetail:{
					joinStatus:'',
					teamTags:[],
					member:[
						{
						  id: "",
						  userName: "root",
						  nickname: "",
						  avatar: "",
						  school: "",
						  introduce: ""	
						}
					], 
					id: '',
					title: '',
					cover:'',
					description: '',
					scale: '',
					type: '', //校内 or 全国
					school: '',
					deadline: '',
					gmCreate: '',
					gmModified: '',
					createBy: '', //队伍创建人
					status: '',
					joinCount: 1,
					deleteId:-1,
				}
			}
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			seeDetail(item){
				uni.request({
					url:''
				})
			},
			clearObj(obj){
				Object.keys(obj).forEach((key) => {
					obj[key] = ''
				})
			},
			getMore(){
					this.loadStatus = 'loading'
					uni.getSystemInfo({
						success: (res) => {
							this.screenHeight = res.screenHeight
							this.screenWidth = res.screenWidth
							this.headerHeight = this.screenHeight*0.11 + this.statusBarHeight
							this.cardHeight = this.screenHeight*0.85
							this.cardWidth = this.screenWidth*0.96
						}
					})
					uni.request({
						url:`http://162.14.102.246:8090/team/front/recruitment/join/${this.page}/12/${this.$store.state.loginUser.userBaseInfo.id}`,
						method:'GET',
						header:{
							xdzn_token: this.token
						}
					}).then(res => {
						console.log(res)
						if(res.data.code == 200){
							this.page++
							this.total = res.data.data.total
							let data = res.data.data.list
							console.log(data)
							if(data.length == 0){
								this.loadStatus = 'nomore'
								return;
							}else{
								data.forEach((item)=>{
									let flag = false
									if(item.deadline && item.gmtCreate){
										flag = this.list.find(obj => obj.id == item.id)
										item.deadline = item.deadline.substring(0,10).replace('T',' ')
										item.gmtCreate = item.gmtCreate.substring(0,10).replace('T',' ')
									}
									if(flag === undefined){
										this.$store.state.loginUser.joinTeam.push(item)
									}
									console.log(this.list)
								})
								this.loadStatus = 'loadmore'
							}
						}
					})
			},
			seeHome(id){
				uni.request({
					method:'GET',
					url:`http://162.14.102.246:8090/user/front/homePage/${id}`,
					header:{
						xdzn_token: this.$store.state.loginUser.token
						
					}
				}).then(res => {
					//console.log('获取数据',res.data.data.home)
					uni.navigateTo({
						url:"/pages/components/userHomeFrames/otherUserHome?info="+encodeURIComponent(JSON.stringify(res.data.data.home))
					})
				})
			},
			seeDetail(item){
				this.openDetail = true
				//this.detailLoading = true
				this.$refs.competitionDetail.open('center')
				
				uni.request({
					url:`http://162.14.102.246:8090/team/front/recruitment/${item.id}`,
					method:'GET',
					header:{
						xdzn_token: this.$store.state.loginUser.token
					}
				}).then(res => {
					if(res.data.code == 200){
						 this.clearObj(this.competitionDetail)
						 let data = res.data.data.recruitment
						 data.deadline = item.deadline 
						 if(data.gmtCreate){
							data.gmCreate = data.gmtCreate.substring(0,8)
						 }
						 
						 this.competitionDetail = data
						 this.competitionDetail.joinStatus = this.getJoinStatus(item)
						 this.detailLoading = false
						
					}else{
						setTimeout(() => {
							this.openDetail = false
							//this.detailLoading = false
						}, 1600)
						
						uni.showToast({
							icon:'error',
							title: '遇到错误',
							duration:1500
						})
					}
				})
			},
			deleteTeam(id){
				this.deleteId = id
				this.confirmDeleteShow = true
				this.$refs.delete.open('center')
			},
			quitDelete(){
				console.log('click')
				this.confirmDeleteShow = false
				this.$refs.delete.close()
				console.log(this.confirmDeleteShow)
			},
			confirmDelete(){
				
				uni.request({
					url:`http://162.14.102.246:8090/team/front/recruitment/${this.deleteId}`,
					method:'DELETE',
					header:{
						xdzn_token: this.token
					}
				}).then(res => {
					if(res.data.code == 200){
						let deleteIndex = this.list.indexOf(
							this.list.find(obj => obj.id == this.deleteId)
						)
						console.log(deleteIndex)
						this.$refs.competitionDetail.close()
						this.$store.state.loginUser.joinTeam.splice(deleteIndex, 1)
						this.quitDelete()	
					}
				})
			},
			getJoinStatus(item){
				//console.log(item)
				let deadline = parseInt(item.deadline.replace(/-/g, ''))
				let nowDate = parseInt(this.timeUtil.toLocaleDateString().replace(/\//g, ''))
				if(nowDate < deadline){
					let flag = this.list.find(obj => obj.id == item.id)===undefined ? false : true
						// console.log('加入的:',this.userTeams)
						// console.log(flag)
					if(flag == true){
						return '已加入'
					}else{
						return '加入队伍'
					}
				}else{
					return '招募结束'
				}
			},
			contactLeader(){
				
			}
		},
		mounted(){
			this.getMore()
			//console.log('uid: ',this.$store.state.loginUser.userBaseInfo.id)
		},
		computed:{
			...mapState({
				list: state=>state.loginUser.joinTeam,
				token: state=>state.loginUser.token
			})
		},
		onLoad(optios) {
			this.statusBarHeight = optios.statusBarHeight
		},
		watch:{
			
		}
	}
</script>

<style scoped>
	.containerMine{
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.seeMore{
		width: 100%;
		height: 90upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
		margin-top: 20upx;
	}
	.header{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1rem;
		font-weight: 500;
	}
	.back{
		position: absolute;
		left: 20upx;
	}
	.main{
			position: relative;
			padding-top: 10upx;
			overflow-y: scroll;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.ever{
			width: 100%;
			height: 230rpx;
			background-color: white;
			border-radius: 15upx;
			display: flex;
			flex-direction: row;
			align-items: center;
			box-shadow: 6upx 10upx 20upx rgba(239, 239, 239, 0.8);
			margin-bottom: 20upx;
			overflow: hidden;
			padding-top: 8upx;
			padding-bottom: 8upx;
			padding-left: 5upx;
			padding-right: 5upx;
		}
		.list{
			display: flex;
			align-items: center;
			flex-direction: column;
		}
		.cover{
			height: 220upx;
			width: 220upx;
			border-radius:15upx;
			overflow: hidden;
			background-color: aqua;
			margin-left: 5upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.mainInfo{
			height: 220upx;
			width: calc(100% - 10upx - 220upx);
			margin-left: 10upx;
			display: flex;
			flex-direction: column;
			padding-bottom: 8upx;
		}
		.teamMaim{
			display: flex;
			width: 100%;
			height: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
		}
		.teamName{
			width: 186px;
			height: 90%;
			font-size: 0.9rem;
			font-weight: 600;
			letter-spacing: 1px;
			display: -webkit-box;
			position: relative;
			overflow: hidden;
			word-wrap: break-all;
			word-break: normal;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
		}
	/* 	.leader{
			width: 100%;
			height: 20%;
			background-color: coral;
			display: flex;
			flex-direction: row;
			align-items: center;
		} */
		
		.description{
			display: -webkit-box;
			position: relative;
			overflow: hidden;
			word-wrap: break-all;
			word-break: normal;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			font-size: 0.8rem;
			width: 92%;
			height: 3rem;
			position: relative;
			top: 4upx;
			left: 15upx;
			color: rgba(122, 122, 122, 0.8);
		}
		.teamTags{
			width: 92%;
			height: 50upx;
			position: relative;
			top: 4upx;
			margin-left: calc(2.5%);
		}
		.deadLine{
			width: 92%;
			height: 50upx;
			display: flex;
			align-items: center;
			position: relative;
			top:6upx;
			margin-left: 12upx;
			font-size: 0.73rem;
			font-weight: 500;
			color: #999999;
		}
		.scale{
			float: left;
			margin-left: 50upx;
			margin-top: 150upx;
			color: white;
		}
		.deadTime{
			position: relative;
			left: 20%;
		}
		.competitionDetail{
			background-color: white;
			overflow-y: scroll;
			padding: 20upx 20upx 20upx 20upx;
			position: relative;
		}
		.deadLine{
			width: 92%;
			height: 50upx;
			display: flex;
			align-items: center;
			position: relative;
			top: 11upx;
			margin-left: 12upx;
			font-size: 0.73rem;
			font-weight: 500;
			color: #999999;
		}
		.scale{
			float: left;
		}
		.deadTime{
			position: relative;
			left: 20%;
		}
		.createBy{
			margin-top: 20upx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: row;
			.name{
				margin-left: 10upx;
			}
		}
		.introduce{
			padding-top: 30upx;
			padding-bottom: 30upx;
			border-bottom: 1upx solid rgba(234, 234, 234, 0.5);
		}
		.footer{
			position: absolute;
			width: 100%;
			right: 0;
			height: 50px;
			background-color: white;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			letter-spacing: 2upx;
			font-weight: bold;
		}
		.delete, .update{
			width: 50%;
			height: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-top: 1upx solid rgba(19,72,87,0.1);
		}
		.memberBox{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
		.memberBox>view{
			margin-right: 30upx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		.header{
			position: relative;
			height: 35px;
			width: 100%;
			letter-spacing: 5px;
			color: black;
			font-size: 1.2rem;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 5px;
			padding-bottom: 5px;
			border-bottom: 2px solid darkgrey;
		}
		.deleteConfirmBox{
			width: 400upx;
			height: 400upx;
			border-radius: 30upx;
			background-color: aliceblue;
			border: 2upx solid rgba(230, 230, 230, 1.0);
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow: hidden;
		}
</style>